<template>
    <view>
        <!-- 顶部标题 -->

		<cu-custom :bgImage="bgImage">
                <view class="text-bold text-black" slot="content">官方商城</view>
            </cu-custom>
        
        <!-- 品牌展示图 -->
        <view class="brand-banner">
            <image src="/static/brand-banner.jpg" mode="aspectFill"></image>
        </view>
        
        <!-- 本月活动 -->
        <view class="section-title">
            <view class="line"></view>
            <view class="title-text">本月活动</view>
            <view class="line"></view>
        </view>
        
        <!-- 活动列表 -->
        <view class="padding">
            <view class="bg-gray light padding radius margin-bottom"></view>
            <view class="bg-gray light padding radius margin-bottom"></view>
            <view class="bg-gray light padding radius margin-bottom"></view>
            <view class="bg-gray light padding radius"></view>
        </view>
    </view>
</template>

<script>
import bgImage from '@/static/tabbar/header.png';
export default {
    data() {
        return {
            StatusBar: this.$statusBarHeight,
            CustomBar: this.$CustomBar,
            bgImage: bgImage
        };
    }
};
</script>

<style>
.brand-banner {
    width: 100%;
    height: 400rpx;
}

.brand-banner image {
    width: 100%;
    height: 100%;
}

/* 带中间文字的分隔线样式 */
.section-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30rpx 30rpx 20rpx;
}

.section-title .line {
    flex: 1;
    height: 1px;
    background-color: #ddd;
}

.section-title .line:first-child {
    flex: 0.2;
}

.section-title .title-text {
    padding: 0 20rpx;
    font-weight: bold;
    color: #333;
}
</style> 